<!--
 * 模态框-导航
 * @Author: xurenda <xurenda@qq.com>
 * @HomePage: https://xurenda.top
 * @Github: https://github.com/xurenda
 * @Date: 2019-11-09 16:15:35
 * @LastEditTime: 2019-12-06 09:45:16
 * @FilePath: \elegant-surf\src\views\Navigation.vue
 -->
<template>
  <layout-has-aside :routerLinks="routerLinks">
    <section class="navigation">
      <div class="nav-box">
        <a
          v-for="nav in currentNavigation"
          :key="nav.label"
          :href="nav.url"
          target="_blank"
        >
          <div>
            <!-- <img :src="nav.src" :alt="nav.label"> -->
            <span>{{ nav.label }}</span>
          </div>
        </a>
      </div>
    </section>
  </layout-has-aside>
</template>

<script>
import LayoutHasAside from '@/components/layout/HasAside'
import { hotNavigations, studyNavigations, videoNavigations, newNavigations, otherNavigations } from '@/assets/js/data'

export default {
  name: "Navigation",
  components: { LayoutHasAside },
  data() {
    return {
      routerLinks: [
        { to: '/navigation/hot', iconName: 'icon-huore', label: '热门' },
        { to: '/navigation/study', iconName: 'icon-xuexi3', label: '学习' },
        { to: '/navigation/video', iconName: 'icon-yingyin-', label: '影音' },
        { to: '/navigation/news', iconName: 'icon-xinwen', label: '新闻' },
        { to: '/navigation/other', iconName: 'icon-qita', label: '其他'}
      ],
      navigationTypes: {
        hot: hotNavigations, // 热门导航
        study: studyNavigations, // 学习导航
        video: videoNavigations, // 影音导航
        news: newNavigations, // 新闻导航
        other: otherNavigations, // 其他导航
      },
      currentNavigation: [],  // 当前导航
    }
  },
  methods: {
    /**
     * 根据路由变化，获得当前导航
     */
    getCurrentNavigation() {
      this.currentNavigation = this.navigationTypes[this.$route.params.navType]
    }
  },
  watch: {
    $route() {
      this.getCurrentNavigation()
    }
  },
  created() {
    this.getCurrentNavigation()
  }
}
</script>

<style scoped lang="stylus">
.navigation
  padding 20px 30px
  box-sizing border-box
  width 100%
  height 100%
  .nav-box
    height 100%
    overflow auto
    display: grid
    grid-template-columns repeat(4,1fr)
    grid-template-rows repeat(5,17%)
    grid-gap 10px
    a
      text-decoration none
      color: #000
      div
        box-sizing border-box
        padding-left 50px
        height 100%
        display: flex
        align-items center
        border-radius 20px
        img
          height 25px
          margin-right 20px
      &:hover
        box-shadow inset 1px 1px 5px #ccc, inset -1px -1px 5px #ccc
</style>
